<template>
  <div class="forget">
    <base-header></base-header>
    <div class="nng-forget">
          <p>找回密码</p>
          <el-form :model="forgetForm" :rules="rules" ref="forgetForm">
              <el-form-item class="region">
                  <el-form-item class="region-left">
                    <el-select v-model="region" placeholder="+86" clearable filterable>
                      <el-option v-for="item in phoneAreaList" :key="item.id" :label="'+'+item.areanum" :value="item.areanum"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="phone" class="region-right">
                    <el-input v-model="forgetForm.phone" placeholder="请输入手机号"></el-input>
                  </el-form-item>
              </el-form-item>
              <el-form-item prop="code">
                  <el-input v-model="forgetForm.code" placeholder="请输入短信验证码"></el-input>
                  <el-button class="send-code" :disabled="isDisabled" @click="sendCode">发送验证码</el-button>
              </el-form-item>
              <el-form-item prop="newPassword">
                  <el-input type="password" v-model="forgetForm.newPassword" placeholder="新密码（包含大小写字母，数字和特殊字符的八位数)" show-password></el-input>
              </el-form-item>
              <el-form-item prop="definePassword">
                  <el-input type="password" v-model="forgetForm.definePassword" placeholder="确认新密码" show-password></el-input>
              </el-form-item>
              <el-form-item>
                  <el-button :loading="loading" class="forget-btn" @click="submitForm('forgetForm')">完成</el-button>                    
              </el-form-item>
          </el-form>
    </div>
    <base-picture></base-picture>
    <base-footer></base-footer>
  </div>
</template>

<script>
import { forgetPwd, sendCodeRequest, commitCode, areaList } from 'api/index'
import BaseHeader from '@/components/base/header/Header'
import BaseFooter from '@/components/base/footer/Footer'
import BasePicture from '@/components/base/picture/Picture'
export default {
  name: 'ResetPwd',
  data() {
      //自定义手机号验证
    const checkPhone = (rule, value, callback) => {
      if (value == "") {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^[0-9]*$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    }
    // 验证验证码
    const checkCode = (rule, value, callback) => {
        if(value == "") {
            return callback(new Error("请输入验证码"));
        }else{
            const reg1 = /^[0-9]{6}$/
            if (!reg1.test(value)){
                return callback(new Error("验证码必须为6位数"))
            }else{
                callback();
            }
        }
    }
    // 验证密码
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入平台登录密码"));
      } else {
        var reg1 = /^(?=.*?[0-9])(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[~!@#$%^&*])[0-9A-Za-z~!@#$%^&*)]{8,}$/;
        if (reg1.test(value)) {
          callback();
        }else {
          return callback(new Error("密码由8位数大小写字母、数字和特殊字符组成"));
        }
      }
    };
    // 确认密码
    var definePwd = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.forgetForm.newPassword) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
      };
    return {
      isDisabled: false,
      loading: false,
      region: '',
      forgetForm: {
          phone: '',
          code: '',
          newPassword: '',
          definePassword: ''
      },
      rules: {
          // region: [
          //   { required: true, message: '请选择区号', trigger: 'change' }
          // ],
          phone: [
              { validator: checkPhone, required: true, trigger: 'change' }
          ],
          code: [
              { validator: checkCode, required: true, trigger: 'change' }
          ],
          newPassword: [
              { validator: validatePass, required: true, trigger: 'change' }
          ],
          definePassword: [
              { validator: definePwd, required: true, trigger: 'change' }
          ]
      },
      phoneAreaList: []
    }
  },
  components: {
      BaseHeader,
      BaseFooter,
      BasePicture
  },
  methods: {
      submitForm(forgetForm){
      this.$refs.forgetForm.validate(valid => {
        if(valid){
          this.loading = true
          // 验证码接口参数
          var param = {
            info: this.forgetForm.phone,
            code: this.forgetForm.code
          }
          // 忘记密码的接口参数
          var params = {
            method: 'phone',
            info: this.forgetForm.phone,
            pwd: this.forgetForm.newPassword,
            rpwd: this.forgetForm.definePassword,
            appId: 'nng0031'
          }

          commitCode(param).then(res => {
            if(res.response_code == 0){
              forgetPwd(params).then(res => {
                if(res.response_code == 0){
                  this.$message.success(res.reason)
                  this.$router.push('/login')
                }else{
                  this.$message.error(res.reason)
                  this.loading = false
                }
              })
            }else{
              this.$message.error(res.reason)
              this.loading = false
            }
          })
          
          
        //   this.$refs[forgetForm].resetFields()
        }else{
          console.log('error submit!!');
          return false
        }
      })
    },
    
    
    sendCode(){
      // if(this.region == ''){
      //   this.region = '86'
      // }
      var params = {
          info: this.forgetForm.phone,
          method: 'phone',
          areaCode: this.region.toString() || '86'
        }
        sendCodeRequest(params).then(res => {
          console.log(res)
        if(res.response_code == 0){
          this.isDisabled = true
            setTimeout(() => {
              this.isDisabled = false
            }, 10000);
          }
      })
    },
    // 获取区号列表
    getAreaList(){
      areaList().then(res => {
        console.log(res)
        res.result.area_code.unshift({ areanum: 86, cname: '中国大陆', ename: 'China', fee: 1 })
        this.phoneAreaList = res.result.area_code
      })
    }
  },
  created(){
    this.getAreaList()
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/varible';
.forget{
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 20;
    .nng-forget{
      position: absolute;
      left: 83px;
      top: 50%;
      transform: translateY(-50%);
      p{
        height: 15px;
        line-height: 15px;
        text-align: left;
        font-size: 16px;
        font-weight: bold;
        color: #666666;
      }
      .el-form {
        margin-top: 20px;
        .send-code{
          margin-left: 10px;
          background-color: #2AB9C6;
          color: #ffffff;
        }
        .forget-btn{
            background-color: #2AB9C6;
            color: #ffffff;
            width: 108px;
        }
      }
      
  }
}
</style>
